<script setup lang="ts">
  import { ref, defineEmits, computed, watch, onMounted } from 'vue';
  // import { Message } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import { queryPackageTask } from '@/api/sorting-matching';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const pageSize = ref(30);
  const pageNumber = ref(1);

  const startPlaneNo = ref('');
  const packageCode = ref('');

  // 发送搜索数据
  const flowQueryData = ref({
    searchParams: computed(() => ({
      startPlaneNo: startPlaneNo.value,
      packageCode: packageCode.value,
    })),
    page: computed(() => ({
      pageSize: pageSize.value,
      currentPage: pageNumber.value,
    })),
  });

  // 表格数据
  async function handleSearch() {
    const newData = await queryPackageTask(flowQueryData.value);
    emit('updateArray', newData);
  }

  // 重置
  function reset() {
    startPlaneNo.value = '';
    packageCode.value = '';
    handleSearch();
  }

  onMounted(() => {
    handleSearch();
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 23) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 11) handleSearch();
    }
  );
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">查询条件</div>
    </template>

    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <a-input
          v-model="packageCode"
          placeholder="工作包"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="startPlaneNo"
          placeholder="架次"
          size="large"
          allow-clear
        />
      </a-col>
      <a-col :span="12">
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset">重置 </a-button>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
  .margin-top {
    margin-top: 10px;
  }
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .div-tips {
    align-items: center;
    text-align: center;
    color: #999;
  }
  .flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
  }
</style>
